<template>
  <div>
    <a-input v-model="httpConfig.httpName" :placeholder="$t('m.eform.apptable.placeholder.httpName')" @click="selectHttpConfig" readOnly>
      <ych-icon slot="addonAfter" type="setting"/>
    </a-input>
    <select-http-view-dialog ref="selectHttpViewDialog" @selectFinished="selectFinished" :groupId="groupId"
                             httpMethod="GET"></select-http-view-dialog>
    <div v-if="httpConfig.httpCode">
      <a-radio-group buttonStyle="solid" v-model="selectedTab" v-if="showSelect" @change="changeTab">
        <a-radio-button value="dict">{{ $t('m.eform.formDesign.label.jian-zhi-dui-zhuan-huan') }}</a-radio-button>
        <a-radio-button value="data">{{ $t('m.eform.formDesign.label.dan-tiao-shu-ju-zhuan-huan') }}</a-radio-button>
      </a-radio-group>
      <a-tooltip v-if="isForm" :title="$t('m.eform.formDesign.label.isFormTip')">
        <a-button icon="redo" @click="redo">{{ $t('m.eform.formDesign.label.zhong-xin-xuan-ran-fu-wu-pei-zhi') }}</a-button>
      </a-tooltip>
      <a-divider orientation="left" v-if="httpConfig.params && httpConfig.params.length > 0" style="font-size: 14px">
        {{ $t('m.eform.formDesign.label.fu-wu-can-shu') }} <a-tooltip
          :title="$t('m.eform.formDesign.label.exprTitle', ['${X-Access-Token}', '${userId}', '${loginName}', '${userName}', '${deptId}', '${deptCode}', '${deptName}', '${orgId}', '${orgCode}', '${orgName}', '${value}'])">
          <ych-icon type="question-circle"></ych-icon>
        </a-tooltip>
      </a-divider>
      <a-form v-if="httpConfig.params && httpConfig.params.length > 0">
        <a-form-item v-for="item in httpConfig.params" :label="item.key" :key="item.key" :label-col="labelColNum"
                     :wrapper-col="wrapperColNum">
          <a-input v-model="item.value" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-can-shu-zhi')"></a-input>
        </a-form-item>
      </a-form>
      <a-divider orientation="left" style="font-size: 14px">
        {{ $t('m.eform.formDesign.label.fu-wu-fan-hui-zhi') }} <a-tooltip :title='tooltip'>
          <ych-icon type="question-circle"></ych-icon>
        </a-tooltip>
      </a-divider>
      <script-button v-if="selectedTab === 'dict'" v-model="httpConfig.result" :label="$t('m.eform.formDesign.label.fan-hui-zhi-jiao-ben')" help-code="httpConfigResultListForGroovy" key="httpConfigResultListForGroovy" :groovy="true"></script-button>
      <script-button v-else v-model="httpConfig.result" :label="$t('m.eform.formDesign.label.fan-hui-zhi-jiao-ben')" help-code="httpConfigResultForGroovy" key="httpConfigResultForGroovy" :groovy="true"></script-button>
    </div>
  </div>
</template>

<script>

import SelectHttpViewDialog from '../../select/dialog/SelectHttpViewDialog';
import ScriptButton from "../designer/packages/ScriptButton";

export default {
  name: "HttpConfigSetting",
  props: {
    httpConfig: Object,
    groupId: {
      type: String,
      required: true
    },
    isForm: Boolean,
    showSelect: Boolean,
  },
  components: {
    SelectHttpViewDialog,
    ScriptButton,
  },
  data() {
    return {
      labelColNum: {
        xs: {span: 24},
        sm: {span: this.isForm ? 12 : 6},
      },
      wrapperColNum: {
        xs: {span: 24},
        sm: {span: this.isForm ? 12 : 18},
      },
      selectedTab: 'dict'
    }
  },
  computed: {
    tooltip() {
      if (this.selectedTab === 'dict') {
        return this.$t('m.eform.formDesign.label.httpTab1');
      } else {
        return this.$t('m.eform.formDesign.label.httpTab2');
      }
    }
  },
  watch: {
    httpConfig: {
      handler(value) {
        if (value) {
          this.selectedTab = this.httpConfig.type || 'dict'
        }
      },
      immediate: true
    }
  },
  methods: {
    changeTab() {
      this.httpConfig.type = this.selectedTab
    },
    selectHttpConfig() {
      this.$refs.selectHttpViewDialog.radio = true;
      this.$refs.selectHttpViewDialog.visible = true;
    },
    selectFinished(selectedRowKeys, selectionRows) {
      let httpConfig;
      if (selectionRows) {
        const httpUrl = selectionRows[0].httpUrl
        const regex = /\{[^\{\}]+\}/g
        const paramsArr = httpUrl.match(regex)
        const params = paramsArr?paramsArr.map(item => {
          return {
            key: item.substring(1, item.length - 1),
            value: null
          }
        }):[]
        httpConfig = {
          httpCode: selectionRows[0].httpCode,
          httpName: selectionRows[0].httpName,
          params: params,
          result: '',
          type: this.selectedTab
        }
      } else {
        httpConfig = {}
      }
      this.$emit("input", httpConfig);
    },
    redo() {
      this.$emit("input", JSON.parse(JSON.stringify(this.httpConfig)));
    }
  }
}
</script>
